
<template>
  <div class="show-info-container">
    <el-divider content-position="right">显示信息</el-divider>
    <el-row type="flex" class="content-container" justify="space-around" :gutter="10">
      <el-col :span="6">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[0] }}</el-col>
            <el-col :span="12">{{ firstInfo?firstInfo:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[1] }}</el-col>
            <el-col :span="12">{{ secondInfo?secondInfo:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content-item">
          <el-row :gutter="10" justify="space-around">
            <el-col :span="12">{{ titleArray[2] }}</el-col>
            <el-col :span="12">{{ thirdInfo?thirdInfo:'暂无' }}</el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default
{
  // 组件名称
  name: 'ShowInfo',
  // 组件
  components:
	{
	},
  props:
	{
	},
  // 数据
  data()
  {
    return {
      titleArray: ['显示信息1', '显示信息2', '显示信3'],
      firstInfo: null,
      secondInfo: null,
      thirdInfo: null
    }
  },
  // 计算属性
  computed:
	{
	},
  // 监听
  watch:
	{
	},
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
	{
	}
}
</script>
<style lang='scss' >
.show-info-container{
	width: 100%;
	height: auto;
	/* background-color: pink; */
	.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .content-item {
    border-radius: 4px;
    min-height: 36px;
	background-color: #FFFFFF;
	font-size: 16px;
	line-height: 36px;
	color:#409EFF;
	text-align: center;
  }
  .content-container{
    padding: 10px 0;
    background-color: #409EFF;
	opacity:0.5;
  }

}

</style>
